<template>
  <div class="home">
    <div class="header">
      <!-- 首页 -->
      <p>
        宏烨经纪人
        <span>
          <img src="../img/2.gif" alt />
        </span>
      </p>
      <dl>
        <dt><img :src="url" alt=""></dt>
        <dd>
          <p>{{name}}</p>
        </dd>
      </dl>
    </div>
    <div class="main">
      <div class="list-box">
        <router-link  v-for="(item,index) in list" :key="index" :to="item.path">
          <dl >
            <dt>
              <van-icon :name="item.url" />
            </dt>
            <dd>{{item.name}}</dd>
          </dl>
        </router-link>
          
      </div>
    </div>
    <div class="number">
      <!-- 新房 -->
      <dl @click="newHouse()">
        <dt>188</dt>
        <dd>新房</dd>
      </dl>
      <!-- 二手房 -->
      <dl @click="twoHouse()">
        <dt>188</dt>
        <dd>二手房</dd>
      </dl>
      <!-- 出租房 -->
      <dl @click="rent()">
        <dt>188</dt>
        <dd>出租房</dd>
      </dl>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      name:sessionStorage.getItem('name'),
      url:sessionStorage.getItem('url'),
      //首页标签列表
      list: [
        {
          url: "smile-comment-o",
          name: "消息",
          path:'/message'
        },
        {
          url: "wap-home-o",
          name: "求租",
          path:'/soliciting'
        },
        {
          url: "wap-home-o",
          name: "求购",
          path:'/askBuy'
        },
        {
          url: "fire-o",
          name: "楼市圈",
          path:'/circle'
        },
        {
          url: "tv-o",
          name: "直播",
          path:'/live'
        },
        {
          url: "shop-o",
          name: "团购",
          path:'/abulk'
        },
        {
          url: "shop-o",
          name: "排行榜",
          path:'/ranking'
        },
        {
          url: "award-o",
          name: "战绩",
          path:'/record'
        }
      ]
    };
  },
  methods:{
      //新房跳转
      newHouse() {
          this.$router.push(`/newHouse`)
      },
       //二手房跳转
      twoHouse() {
          this.$router.push(`/twoHouse`)
      },
       //出租房跳转
      rent() {
          this.$router.push(`/rent`)
      }
  }
};
</script>

<style>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.home .header {
  width: 100%;
  height: 220px;
  background-color: dodgerblue;
}

.home .header > p {
  color: white;
  font-size: 18px;
  margin-top: 10px;
}

.home .header > p span {
  float: right;
}

.home .main a{
  color: black;
}

.home .header dl {
  width: 130px;
  height: 130px;
  margin: 20px auto;
  text-align: center;
}

.home .header dl dt {
  width: 85px;
  height: 85px;
  background-color: black;
  margin: 0 auto;
  border-radius: 50%;
}

.home .header dl dt img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.home .header dl dd {
  margin-top: 8px;
  color: white;
  font-size: 18px;
}

.home .main {
  flex: 1;
}

.home .main .list-box {
  width: 100%;
  height: 300px;
  /* border: 1px solid #ccc; */
  margin-top: 70px;
}

.home .main .list-box dl {
  float: left;
  width: 33%;
  height: 100px;
  /* border: 1px solid #ccc; */
  text-align: center;
  line-height: 30px;
}

.home .main .list-box dl dt {
  margin-top: 3px;
  color: deepskyblue;
}

.home .main .list-box dl dt i {
  font-size: 30px;
}

.home .main .list-box dl dd{
  color: #b3b3b3;
}

.home .number {
  position: absolute;
  width: 90%;
  height: 80px;
  border: 1px solid #ccc;
  left: 5%;
  top: 192px;
  border-radius: 10px;
  background-color: white;
}

.home .number dl {
  float: left;
  width: 33%;
  height: 80%;
  text-align: center;
  line-height: 30px;
  margin-top: 3%;
}

.home .number dl dt {
  color: deepskyblue;
  font-size: 24px;
}

.home .number dl dd {
  color: #b3b3b3;
  font-size: 14px;
}
</style>